<template>
  <el-dialog
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :fullscreen="fullscreen"
    :modal="modal"
    :visible.sync="tfVisible"
    :width="width"
    :show-close="showClose"
    append-to-body
    class="asm-core"
    custom-class="tf-dialog"
  >
    <template v-slot:title>
      <div class="tf-dialog-header">
        <span style="padding-left: 10px">
          <i :class="titleIcon" v-if="titleIcon !== ''"></i>
          {{ title }}
        </span>
      </div>
    </template>
    <div class="tf-dialog-content">
      <slot name="content"></slot>
    </div>
    <div class="tf-dialog-footer">
      <el-card shadow="always">
        <slot name="footer"></slot>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: '1000px'
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    modal: {
      type: Boolean,
      default: true
    },
    titleIcon: {
      type: String
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    tfVisible: {
      get() {
        return this.visible
      },
      set(s) {
        this.$emit('update:visible', s)
      }
    }
  }
}
</script>

<style lang="stylus" scope>
.tf-dialog
  &.el-dialog
    border-radius 5px
  .el-dialog__header
    padding 0px
    margin-bottom 0px
    .el-dialog__headerbtn .el-dialog__close
      color #fff
      opacity 0.9
      &:hover
        opacity 1
  .el-dialog__headerbtn
    top 12px
  .el-dialog__body
    padding 0px
  .tf-dialog-content
    padding 10px
  .tf-dialog-header
    text-align left
    width 100%
    height 46px
    background linear-gradient(145deg, $primary 11%, $dark-primary 75%)
    background linear-gradient(145deg, var(--a-color-primary) 11%, var(--a-color-dark-primary) 75%)
    color #fff
    font-size 1rem
    line-height 46px
    border-top-left-radius 5px
    border-top-right-radius 5px
  .tf-dialog-footer
    .el-card__body
      padding 0px
    .el-card, .el-message
      border-top-left-radius 0px
      border-top-right-radius 0px
      border-bottom-left-radius 5px
      border-bottom-right-radius 5px
  .el-select, .el-cascader
    width 100%
</style>
